<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { DcpzSaveInputDTO } from '@/api/xtpz-dto'
import xtpzService from '@/api/xtpz'
import { useMainStore } from '@/store/main'

const store = useMainStore()

// 入参
const loading = ref<boolean>(false)

// 生命周期
onMounted(() => {
  // 获取配置详情
  init()
})
/**
 * 初始化
 */
const init = () => {
  getPzxq()
}

/*
 * 获取配置详情
 */
const getPzxq = () => {
  const params = {
    dwbm: store.$state.userInfo.dwbm,
  }
  xtpzService.getDcpz(params).then((res) => {
    form.value = { ...form.value, ...res.data }
  })
}

/*
 * 保存配置详情
 */

const savePzxq = (formEl: any) => {
  if (!formEl) return
  formEl.validate((valid: any) => {
    if (valid) {
      const params = { ...form.value, gxfwqdk: `${form.value.gxfwqdk}` }
      loading.value = true
      xtpzService
        .saveDcpz(params)
        .then((res) => {
          if (res.code !== 0) {
            return ElMessage({ type: 'error', message: res.message })
          }
          ElMessage.success('保存成功')
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}
/* 表单数据 */
const form = ref<DcpzSaveInputDTO>({
  bz: '',
  dcrwlx: '',
  dcsj: '',
  gxfwqdk: '',
  gxfwqip: '',
  pmm: '',
  sjbbclj: '',
  sjbdczdajs: 0,
  wjcsxy: '',
  yhm: '',
})
/* 表单校验规则 */
const rules = ref({
  gxfwqip: [{ required: true, message: '请填写', trigger: 'blur' }],
  gxfwqdk: [{ required: true, message: '请填写', trigger: 'blur' }],
  sjbbclj: [{ required: true, message: '请填写', trigger: 'blur' }],
  yhm: [{ required: true, message: '请填写', trigger: 'blur' }],
  pmm: [{ required: true, message: '请填写', trigger: 'blur' }],
  dcrwlx: [{ required: true, message: '请选择', trigger: 'blur' }],
  sjbdczdajs: [{ required: true, message: '请填写', trigger: 'blur' }],
})
const ruleFormRef = ref()
/* 下拉框数据 */
const options = [
  {
    value: 'S',
    label: '实时',
  },
  {
    value: 'D',
    label: '定时',
  },
]

defineExpose({ init })
</script>
<template>
  <div class="container">
    <div class="header">
      <el-button type="primary" @click="savePzxq(ruleFormRef)">保存</el-button>
    </div>
    <div class="content">
      <div class="top">
        <div class="title">数据包导出配置</div>
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleFormRef"
          label-width="180"
          label-position="left"
        >
          <el-form-item label="共享服务器IP" prop="gxfwqip" style="width: 620px">
            <div class="bottom-input">
              <el-input
                v-model="form.gxfwqip"
                show-password
                placeholder="请输入"
                style="width: 50%"
              />
              <p>导出数据包临时存储服务器ip地址</p>
            </div>
          </el-form-item>
          <el-form-item label="共服务器端口" prop="gxfwqdk" style="width: 620px">
            <div class="bottom-input">
              <el-input-number
                v-model="form.gxfwqdk"
                placeholder="请输入"
                :min="0"
                style="width: 50%"
              />
              <p>共享服务器端口</p>
            </div>
          </el-form-item>
          <el-form-item label="数据包保存路径" prop="sjbbclj" style="width: 620px">
            <div class="bottom-input">
              <el-input v-model="form.sjbbclj" placeholder="请输入" style="width: 50%" />
              <p>数据包保存相对路径</p>
            </div>
          </el-form-item>
          <el-form-item label="SFTP用户名" prop="yhm" style="width: 620px">
            <div class="bottom-input">
              <el-input show-password v-model="form.yhm" placeholder="请输入" style="width: 50%" />
              <p>访问数据包保存路径的sftp用户名</p>
            </div>
          </el-form-item>
          <el-form-item label="SFTP密码" prop="pmm" style="width: 620px">
            <div class="bottom-input">
              <el-input show-password v-model="form.pmm" placeholder="请输入" style="width: 50%" />
              <p>用户密码</p>
            </div>
          </el-form-item>
          <el-form-item label="导出任务类型" prop="dcrwlx" style="width: 620px">
            <div class="bottom-input">
              <el-select v-model="form.dcrwlx" clearable placeholder="请选择" style="width: 50%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <p>数据包导出任务时效类型</p>
            </div>
          </el-form-item>
          <el-form-item label="数据包导出最大案件数" prop="sjbdczdajs" style="width: 620px">
            <el-input-number v-model="form.sjbdczdajs" :min="1" style="width: 50%" />
          </el-form-item>
          <el-form-item label="备注" style="width: 620px">
            <el-input v-model="form.bz" placeholder="请输入" style="width: 50%" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #d3d3d3;
  }
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    .top {
      // border-bottom: 1px solid #d3d3d3;
      margin-top: 10px;
      .title {
        padding: 10px 0;
        font-weight: 700;
        font-size: 16px;
      }

      .bottom-input {
        width: 100%;
        display: flex;
        // border: 1px solid red;
        justify-content: flex-start;
      }
    }
    p {
      margin-left: 10px;
      line-height: 32px;
      letter-spacing: 0px;
      font-size: 14px;
    }
  }
}
</style>
